import React from 'react';
import { Button } from 'antd';
import DataSet from '@antv/data-set';
import {Chart, Geom, Axis, Tooltip, Legend, Coord, Guide, Label} from 'bizcharts';
import styles from './index.less';
const { Arc, Html, Line } = Guide;
// 定义度量
const cols = {
    percent: {
        formatter: val => {
            val = (val * 100) + '%';
            return val;
        }
    }
}

export default ({ data,title}) => {

    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.source(data).transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
    });
  return (
      <Chart height={100} data={dv} scale={cols} padding={[5]} forceFit>
          <Coord type={'theta'} radius={1} innerRadius={0.8}/>
          <Axis name="percent"/>
          {/*<Legend position='right' offsetY={-150 / 2 + 60} offsetX={-30}/>*/}
          <Tooltip
              showTitle={false}
              itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          />
          <Guide >
              <Html position={['50%', '50%']}
                    html={`<div style="color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;">${title}</div>`}
                    alignX='middle' alignY='middle'/>
          </Guide>
          <Geom
              type="intervalStack"
              position="percent"
              color='item'
              tooltip={['item*percent', (item, percent) => {
                  percent = percent * 100 + '%';
                  return {
                      name: item,
                      value: percent
                  };
              }]}
              style={{lineWidth: 0, stroke: '#fff'}}
              select={false}
          >
              <Label content='percent' offset={-10}
                     textStyle={{
                         rotate: 0,
                         textAlign: 'center',
                         shadowBlur: 5,
                         shadowColor: '#000',
                     }}/>
          </Geom>
      </Chart>
  );
};
